<template>
  <div class="leftallflex">
    <div
      class="boederstyle"
      v-for="(item, index) in Warehouse"
      :key="index"
      :class="{ highlighted: index === highlightedIndex }"
    >
      <p class="newwitekgh" @click="oneroom(item, index)">
        {{ item.warehouseName }}
      </p>
    </div>
    <div class="boederstyle" v-show="show">
      <p class="newwitekgh" @click="outshop">物料出库</p>
    </div>
    <div class="boederstyle">
      <p class="newwitekgh" @click="SystemSettings">系统设置</p>
    </div>

    <!-- dialog 系统设置 -->
    <el-dialog
      title="系统设置"
      :visible.sync="dialogVisible"
      width="80%"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-position="top">
        <el-form-item label="仓库名称" prop="warehouseName">
          <div style="font-size: 17px">{{ form.warehouseName }}</div>
        </el-form-item>
        <template v-if="dialogshow">
          <el-form-item label="1号摄像头IP" prop="inDoorCameraIp">
            <el-input v-model="form.inDoorCameraIp"></el-input>
          </el-form-item>
          <el-form-item label="2号摄像头IP" prop="outDoorCameraIp">
            <el-input v-model="form.outDoorCameraIp"></el-input>
          </el-form-item>
          <el-form-item label="感应门IP" prop="doorIp">
            <el-input v-model="form.doorIp"></el-input>
          </el-form-item>
          <el-form-item label="归还时间设置" prop="longTimeNoReturn">
            <el-input v-model="form.longTimeNoReturn"></el-input>
          </el-form-item>
        </template>
      </el-form>
      <div>SEE推送地址 {{ Eventsource }}</div>
      <div>服务器IP地址 {{ baseurl }}</div>
      <div style="float: left; font-size: 18px; color: skyblue">
        V20231123.3
      </div>
      <div slot="footer" class="dialog-footer">
        <el-popconfirm
          title="确定恢复出厂设置吗"
          @confirm="clearLocalStorage"
          style="float: left"
        >
          <el-button slot="reference" type="danger">恢复出厂设置</el-button>
        </el-popconfirm>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    
  <script>
import {
  setConfigByWarehouse,
  listAllWarehouse,
  getConfigByWarehouse,
  setShowWarehouseId,
} from "@/api/index";
export default {
  name: "HelloDorld",
  data() {
    return {
      Eventsource: window.electron.Eventsource,
      baseurl: window.electron.baseurl,
      highlightedIndex: 0,
      dialogshow: true,
      dialogVisible: false,
      rules: {
        inDoorCameraIp: [
          { required: true, message: "摄像头IP输入不能为空", trigger: "blur" },
          {
            pattern: /^(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/,
            message: "格式有误请重新输入",
            trigger: "blur",
          },
        ],
        outDoorCameraIp: [
          { required: true, message: "摄像头IP输入不能为空", trigger: "blur" },
          {
            pattern: /^(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/,
            message: "格式有误请重新输入",
            trigger: "blur",
          },
        ],
        longTimeNoReturn: [
          { required: true, message: "长时间未归还", trigger: "blur" },
          {
            pattern: /^[1-9]\d{0,2}$/,
            message: "格式有误请重新输入",
            trigger: "blur",
          },
        ],
        doorIp: [
          { required: true, message: "感应门IP不能为空", trigger: "blur" },
          {
            pattern: /^(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/,
            message: "格式有误请重新输入",
            trigger: "blur",
          },
        ],
      },
      form: {
        inDoorCameraIp: "",
        outDoorCameraIp: "",
        longTimeNoReturn: "",
        doorIp: "",
        warehouseId: "",
        warehouseName: "",
      },
      // 页面仓库展示
      Warehouse: [],
      setmywarehouseId: "",
      mytestform: [],
      selectoptisions: [],
      show: true,
    };
  },
  mounted() {
    // 备份下        初始化页面保存的本地表单数据
    this.mytestform = JSON.parse(localStorage.getItem("myfrom"));

    if (this.mytestform.warehouseId === "G63") {
      listAllWarehouse().then((responce) => {
        const res = responce.data.map((item) => {
          return {
            warehouseName: item.warehouseName,
            id: item.id,
          };
        });
        this.show = false;
        // 仓库显示展示   初始化页面保存的3条数据
        this.Warehouse = res;
        // 先拿本地的id   有可能为空,为空说明初始化点击的是值班室, 直接拿数组第一项
        this.setmywarehouseId =
          localStorage.getItem("setmywarehouseId") || this.Warehouse[0].id;
        // 拿到值以后存入本地
        localStorage.setItem("setmywarehouseId", this.setmywarehouseId);
        this.oneroom(this.Warehouse[0], 0);
      });
    } else {
      // 如果选择的不是 G63  那就拿到本地的表单数据作为展示
      this.Warehouse = [this.mytestform];
    }
  },
  methods: {
    dds(data) {
      console.log(data);
    },
    // 恢复出厂设置
    clearLocalStorage() {
      localStorage.clear();
      this.$message({
        type: "success",
        message: "恢复出厂设置成功",
      });
      this.$router.push("/");
      window.location.reload();
    },
    // 清除表单
    close() {
      this.dialogVisible = false;
      this.form = this.mytestform;
    },
    // 提交表单
    submit() {
      if (this.form.warehouseId === "G63") {
        this.dialogVisible = false;
      } else {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const res = await setConfigByWarehouse(this.form);
            if (res.data === "绑定成功") {
              this.$store.state.setmylongtime = this.form.longTimeNoReturn
              this.$message({ type: "success", message: "设置成功" });
            } else {
              this.$message.error(res.data);
            }
          } else {
            this.$message.error("设置失败请重试");
          }
        });
      }
      this.dialogVisible = false;
    },
    // 点击仓库高亮和切换数据  数据是从服务器获取的 没有不会切换到值班室
    async oneroom(item, index) {
      console.log(item);
      this.highlightedIndex = index;
      localStorage.setItem("setmywarehouseId", item.id || item.warehouseId);
      this.$store.commit(
        "setmywarehouseId",
        localStorage.getItem("setmywarehouseId")
      );
      console.log(this.$store.state.warehouseId);
      await setShowWarehouseId({ wareHouseId: item.id || item.warehouseId });
    },
    // 出库
    outshop() {
      this.$router.push("/settlement");
    },
    // 点击系统设置显示dialog
    SystemSettings() {
      this.dialogVisible = true;
      // 数据回显 G63没有显示
      if (this.mytestform.warehouseName != "值班室") {
        // 数据回显
        getConfigByWarehouse({ warehouseId: this.mytestform.warehouseId }).then(
          (responce) => {
            console.log(responce);
            this.selectoptisions = JSON.parse(JSON.stringify(responce.data));
            this.form = responce.data;
          }
        );
      } else {
        // 说明是值班室,直接把值班室id传过去
        this.form.warehouseName = "值班室";
        this.dialogshow = false;
      }
    },
  },
};
</script>
    
  <style lang="scss" scoped>
::v-deep.el-dialog__title {
  font-size: 20px;
}
::v-deep.el-form--label-top .el-form-item__label {
  font-size: 20px;
}
.highlighted {
  background-color: blue; /* 高亮时的背景颜色 */
}
.leftallflex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.boederstyle {
  width: 80%;
  height: 7rem;
  border: 2px solid skyblue;
  border-radius: 1.3rem;
  margin: 0px auto 10%;
  text-align: center;
}
.newwitekgh {
  margin: 1.3rem auto;
  cursor: pointer;
  writing-mode: vertical-rl;
  color: white;
}
</style>
    